<template>
<div id="home">
<home-head-bar></home-head-bar>
<div class="banner">
    <img src="../../assets/img/home/banner.webp" alt="">
</div>
<searchBox :hotplace="hotplace"></searchBox>
<search-bar v-if="isShowFiex"></search-bar>
<categories :categoriesData="categoriesData"></categories>
<HomeHouseList :houseList="houseList"></HomeHouseList>
</div>
</template>

<script setup>
import homeHeadBar from './components/nav.vue'
import searchBox from './components/search-box.vue'
import useHomeStore from '@/store/modules/homeStore'
import categories from './components/categories.vue'
import homeHouseList from './components/home-house-list.vue'
import { computed, onMounted, onUnmounted, ref, toRaw, watch } from '@vue/runtime-core'
import { storeToRefs } from 'pinia'
import HomeHouseList from './components/home-house-list.vue'
import useScroll from '@/hook/useScroll'
import searchBar from './components/home-search-bar.vue'

const HomeStore = useHomeStore()
HomeStore.getHotCityPlace()
HomeStore.getCateGoriesData();
HomeStore.getHoustListData()
const hotplace = computed(()=>{
    return HomeStore.hotPlaces;
})
const { categoriesData } = storeToRefs(HomeStore);
const { houseList } = storeToRefs(HomeStore);


const { scrollOnBottom,nowScroll } = useScroll();
watch(scrollOnBottom,(newValue)=>{
    if(newValue){
        HomeStore.getHoustListData().then(()=>{
            scrollOnBottom.value = false
        })
    }
})
const isShowFiex = computed(()=>{
    return nowScroll.value >= 350
})

</script>
 
<style lang="less" scoped>
.banner{
    img{
        width: 100%;
    }
}

</style>